<template>
  <view class="stats-grid">
    <view 
      v-for="stat in stats" 
      :key="stat.id" 
      class="stat-item"
    >
      <view class="stat-icon">
        <!-- 使用条件渲染，根据图标类型显示不同的图片 -->
        <uni-icons v-if="iconExists(stat.icon)" :type="stat.icon" size="20" color="#ff00ff"></uni-icons>
        <image 
          v-else 
          :src="getIconSrc(stat.icon)" 
          class="custom-icon-image" 
          mode="aspectFit"
        ></image>
      </view>
      <text class="stat-value">{{ stat.value }}</text>
      <text class="stat-title">{{ stat.title }}</text>
    </view>
  </view>
</template>

<script setup>
defineProps({
  stats: {
    type: Array,
    default: () => []
  }
});

// 检查图标是否存在于uni-icons中
const iconExists = (iconName) => {
  // uni-icons中存在的图标
  const existingIcons = ['search','refresh'];
  return existingIcons.includes(iconName);
};

// 获取自定义图标的路径
const getIconSrc = (iconName) => {
  // 图标映射表
  const iconMap = {
    'checkmark' : '/static/icons/checkmark.png',
	'clock' : '/static/icons/time.png'
  };
  
  return iconMap[iconName] || '/static/icons/default-icon.png';
};
</script>

<style>
.stats-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}

.stat-item {
  width: 48%;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(255, 0, 255, 0.3);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.stat-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00ffff, transparent);
}

.stat-icon {
  margin-bottom: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(255, 0, 255, 0.5);
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: #00ffff;
  margin-bottom: 5px;
}

.stat-title {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

.custom-icon-image {
  width: 20px;
  height: 20px;
}
</style>
